<template>
  <view class="fee-item">
    <view class="fee-table" v-if="record">
      <!-- 表头 -->
      <view class="tlt">
        <view>费用名称</view>
        <view>费用金额</view>
        <view>待结金额</view>
        <view>生成节点</view>
        <view>费用备注</view>
      </view>
      <view style="border: 2rpx solid #f7f8fa; padding-bottom: 22rpx">
        <!-- 1级 -->
        <view class="fee-first">
          <view @click="handleFold">
            <text style="margin-right: 12rpx">{{ record.feeName }}</text>
            <template v-if="record.feeDetailList && record.feeDetailList.length">
              <ve-icon v-if="feeFold" name="arrow_top" size="28" />
              <ve-icon v-else name="arrow_bottom" size="28" />
            </template>
          </view>
          <view>{{ numFormatThousands(record.totalAmount, 1) }}</view>
          <view>{{ numFormatThousands(record.outstandingAmount, 1) }}</view>
          <view>{{ record.createNodeName }}</view>
          <view class="more-remark" @click="showRemark(record.remark)">{{ record.remark }}</view>
        </view>
        <!-- 2级， 3级 -->
        <view class="fee-other" v-if="record.feeDetailList && feeFold">
          <!-- 2级 -->
          <view class="twice" v-for="(el, elindex) in record.feeDetailList" :key="elindex">
            <view @click="open2(index, elindex)">
              <text style="margin-right: 12rpx">{{ el.type == 0 ? el.feeCategoryName : el.itemName }}</text>
              <!-- <ve-icon v-if="el.childrenList.length" name="arrow_top" size="28" /> -->
            </view>
            <view>{{ numFormatThousands(el.amount, 1) }}</view>
            <view></view>
            <view></view>
            <view class="more-remark" @click="showRemark(el.remark)">{{ el.remark }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { numFormatThousands } from '@/vehicle-ui/utils/tools.js'
  const props = defineProps({
    record: Object,
  })
  console.log(props.record)
  const feeFold = ref(true)
  const handleFold = () => {
    feeFold.value = !feeFold.value
  }
  const showRemark = (text) => {
    uni.showModal({
    	title: '备注',
    	content: text,
      showCancel: false,
    	success: function (res) {
    		if (res.confirm) {
    			console.log('用户点击确定');
    		}
    	}
    });
  }
</script>

<style lang="less" scoped>
  .fee-item {
    overflow-x: scroll;
    margin-top: 24rpx;
    .fee-table {
      width: 1160rpx;
      .tlt {
        width: 100%;
        height: 88rpx;
        background: #f7f8fa;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #8491a8;
        font-size: 24rpx;
        view:nth-child(1) {
          width: 260rpx;
          margin-left: 24rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 160rpx;
        }
        view:nth-child(4) {
          width: 160rpx;
        }
        view:nth-child(5) {
          width: 320rpx;
        }
      }
      .fee-first {
        width: 100%;
        margin: 32rpx 0 16rpx;
        background: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #191c27;
        font-size: 28rpx;
        view:nth-child(1) {
          width: 260rpx;
          margin-left: 24rpx;
        }
        view:nth-child(2) {
          width: 160rpx;
        }
        view:nth-child(3) {
          width: 160rpx;
        }
        view:nth-child(4) {
          width: 160rpx;
        }
        view:nth-child(5) {
          width: 320rpx;
        }
      }
      .fee-other {
        margin-left: 22rpx;
        .twice {
          width: calc(100% - 20rpx);
          background: #f7f8fa;
          padding: 0 24rpx 24rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #191c27;
          font-size: 28rpx;
          view {
            margin-top: 24rpx;
          }
          view:nth-child(1) {
            width: 220rpx;
            margin-left: 24rpx;
          }
          view:nth-child(2) {
            width: 160rpx;
          }
          view:nth-child(3) {
            width: 160rpx;
          }
          view:nth-child(4) {
            width: 160rpx;
          }
          view:nth-child(5) {
            width: 300rpx;
          }
        }
        .third {
          width: calc(100% - 20rpx);
          background: #f7f8fa;
          padding: 0 24rpx 24rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #191c27;
          font-size: 28rpx;
          view:nth-child(1) {
            width: 196rpx;
            margin-left: 48rpx;
          }
          view:nth-child(2) {
            width: 160rpx;
          }
          view:nth-child(3) {
            width: 160rpx;
          }
          view:nth-child(4) {
            width: 160rpx;
          }
          view:nth-child(5) {
            width: 280rpx;
          }
        }
      }
    }
  }
  .more-remark{
    max-width: 300rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>
